<template>
  <div class="hmax rel">

    <div class="nav tc g6 bgwh abs">{{ showGlobal ? '全局配置' : label }}</div>
    <div class="pt60 ovya hmax sz">
      <el-form
        ref="form"
        :model="formData"
        size="small"
        class="p24 bz"
      >
        <template v-if="showGlobal">
          <el-form-item label="事件标识">
            <span class="b mr10"> {{ eventItem.composerKey }}</span>
            <el-button
              type="text"
              @click="copy(formData.composerKey)"
              icon="el-icon-document-copy"
            ></el-button>
          </el-form-item>
          <el-form-item
            label="编排名称"
            prop="eventName"
            :rules="[
              { required: true, message: '编排名称不能为空', trigger: 'change' },
            ]">
            <el-input
              v-model="formData.eventName"
              placeholder="请输入编排名称"
              onkeypress="if(event.keyCode == 13) return false;"
              @change="changeEventName"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <component
            v-if="blockTypeArr.includes(block.type)"
            :is="blockComponentType"
            :workspace="workspace"
            :block="block"
          ></component>
        </template>

      </el-form>
    </div>
  </div>
</template>
<script>
import Blockly from 'blockly'
import { copy } from '@/utils/util'
import EventBus from '@/utils/eventBus'

import root_function_expression from './module/root_function_expression'
import modal_select from './module/modal_select'
import component_select from './module/component_select'
import common_component_select from './module/common_component_select'
import textContent from './module/textContent'
import form_select from './module/form_select'
import table_select from './module/table_select'
import table_set_select from './module/table_set_select'
import callback_function_expression from './module/callback_function_expression'
import request_model from './module/request_model'
import message from './module/message'
import message_box from './module/message_box'
import json_generate from './module/json_generate'
import console_print from './module/console_print'
export default {
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    showGlobal: {},
    label: {}
  },
  components: { root_function_expression,
    modal_select,
    component_select,
    common_component_select,
    textContent,
    form_select,
    table_select,
    table_set_select,
    callback_function_expression,
    request_model,
    message,
    message_box,
    json_generate,
    console_print },
  data () {
    return {
      copy,
      titleLabel: '全局配置', // 标题
      workspace: {},
      formData: {},
      blockComponentType: '',
      modalBlockArr: ['open_modal', 'close_modal'],
      componentBlockArr: ['component_display', 'component_disable', 'component_required'],
      commonComponentBlocks: ['component_get_data', 'component_get_select_data', 'component_reload', 'component_set_data', 'component_assign_query'],
      textBlocksArr: ['text'],
      formBlocksArr: ['form_submit', 'form_validate', 'form_add_values', 'form_set_values', 'form_get_values', 'form_reset'],
      cbBlocksArr: ['callback_function_expression'],
      requestBlockArr: ['request_model'],
      tableBlocksArr: ['table_cancel_data'],
      tableSetSelectBlocks: ['table_set_select'],
      messageBlocksArr: ['message_text'],
      messageBoxBlocks: ['message_box']
    }
  },
  mounted () {
    EventBus.$on('sendWorkspace', (workspace) => {
      this.workspace = workspace
    })
  },
  destroyed () {
    EventBus.$off('sendWorkspace')
  },
  computed: {
    blockTypeArr () {
      return [...this.modalBlockArr, ...this.componentBlockArr, ...this.commonComponentBlocks,
        ...this.textBlocksArr, ...this.formBlocksArr, ...this.tableBlocksArr, ...this.tableSetSelectBlocks,
        ...this.cbBlocksArr, ...this.requestBlockArr, ...this.messageBlocksArr, ...this.messageBoxBlocks,
        'root_function_expression', 'json_generate', 'console_print']
    }
  },
  watch: {
    'block': {
      handler () {
        this.getBlockData()
      },
      immediate: true
    },
    eventItem: {
      handler: function () {
        this.formData = this.eventItem
      },
      immediate: true
    }
  },
  methods: {
    init () {
      // this.getComponentType()
    },
    getBlockData () {
      this.getComponentType()
      // let showGlobalFlag = true
      // let label = '全局配置'
      //
      // if (this.showGlobal) {
      //   label = '全局配置'
      // } else {
      //   const type = this.block.type
      //   const eventBlocks = ['root_function_expression']
      //   const actionBlocks = ['open_modal', 'close_modal']
      //   if (eventBlocks.includes(type)) {
      //     showGlobalFlag = false
      //     label = '事件配置'
      //   } else if (actionBlocks.includes(type)) {
      //     showGlobalFlag = false
      //     label = '动作配置'
      //   }
      // }
      // console.log('showGlobalFlag', showGlobalFlag)
      // if (showGlobalFlag) {
      //   // this.$emit('updateShowGlobal', true)
      //   // this.showGlobal = true
      // }
      //
      // this.titleLabel = label
    },
    // 根据积木获取右侧的具体内容
    getComponentType () {
      const type = this.block.type
      if (this.modalBlockArr.includes(type)) {
        this.blockComponentType = 'modal_select'
      } else if (this.componentBlockArr.includes(type)) {
        this.blockComponentType = 'component_select'
      } else if (this.textBlocksArr.includes(type)) {
        // this.block.isEditable()
        this.blockComponentType = 'textContent'
      } else if (this.formBlocksArr.includes(type)) {
        this.blockComponentType = 'form_select'
      } else if (this.tableBlocksArr.includes(type)) {
        this.blockComponentType = 'table_select'
      } else if (this.commonComponentBlocks.includes(type)) {
        this.blockComponentType = 'common_component_select'
      } else if (this.messageBlocksArr.includes(type)) {
        this.blockComponentType = 'message'
      } else {
        this.blockComponentType = this.block.type
      }
    },
    // 修改编排名称
    changeEventName (val) {
      const rootBlock = this.workspace?.getBlockById('rootBlock')
      rootBlock && rootBlock.setFieldValue(val, 'ROOT_NAME_INPUT')
    },
    updateWorkspaceWithXml () {
      const xml = Blockly.Xml.workspaceToDom(this.workspace)
      Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, this.workspace)
    },
    // 校验全局配置
    validateGlobal () {
      this.$nextTick(() => {
        this.$refs['form'].validateField('eventName')
      })
      return !!this.formData.eventName
    }

  }
}
</script>

<style lang="scss" scoped>
.nav {
  top: 0;
  width: 100%;
  height: 56px;
  line-height: 56px;
  border-bottom: 1px solid #f1f1f1;
  z-index: 999;
  background-color: #f5f7fa;
  color: #333;
  border-right: 1px solid #f1f1f1;
}
</style>
